{extend name="public/base" /}

{block name="main"}
<el-row>
<span>维度设置</span>
<el-divider></el-divider>
</el-row>

<el-row>

    <el-table :data="dimensionData" v-if="is_edit"  size="small">

        <el-table-column  label="KEY">
            <template slot-scope="scope"  >
                <el-input  v-model="scope.row.key" v-if="scope.row.is_new"  size="small"></el-input>
                <span v-else> {{ scope.row.key }} </span>
            </template>
        </el-table-column>

        <el-table-column  label="TITLE">
            <template slot-scope="scope"  >
                <el-input v-model="scope.row.title"   size="small"></el-input>
            </template>
        </el-table-column>

        <el-table-column label="自由模式" >
            <template slot-scope="scope">

                <el-checkbox v-model="scope.row.if_free_b"></el-checkbox>
            </template>
        </el-table-column>
        <el-table-column label="值选项" >
            <template slot-scope="scope">
                <el-input v-model="scope.row.values"   size="small"></el-input>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="{row,$index}"  v-if="row.key">
                <i class="el-icon-upload2" @click="onUp($index)"></i>   <i class="el-icon-download" @click="onDown($index)"></i>  <i class="el-icon-close" @click="onDel($index)"></i>

            </template>
        </el-table-column>

    </el-table>
    <el-table :data="dimensionData" v-else  size="small">

        <el-table-column label="KEY" prop="key"></el-table-column>
        <el-table-column label="TITLE" prop="title"></el-table-column>
        <el-table-column label="自由模式" >
            <template slot-scope="scope">
                <i v-show="scope.row.if_free==1" class="el-icon-check"></i>
            </template>
        </el-table-column>
        <el-table-column label="值选项" >
            <template slot-scope="scope">
                <span v-show="scope.row.if_free!=1">{{scope.row.values}}</span>
            </template>
        </el-table-column>
        <el-table-column label=""></el-table-column>

    </el-table>

</el-row>

<el-row  type="flex"  justify="center" >
    <el-button type="primary" @click="onSubmit" v-if="is_edit">保存并删除缓存</el-button>
    <el-button type="primary" @click="onEdit" v-else>编辑</el-button>


</el-row>

<el-row >

    <el-divider></el-divider>

</el-row >

<el-row  class="rem">

        <div >字段说明:</div>

    <div >维度，为可选使用项，但强烈推荐使用。可以自由增加，删除，调整优先级。修改完成后，系统其他部分跟随改变，并删除相关缓存。</div>
    <div >KEY: 主键。不能重复，建议格式为英文字母。</div>
    <div >KEY: 新建时 ，命名不要和已有列重名。表 config 会增加同名列。如果无权限，会弹出提示：需手动执行sql添加列后，再执行此操作。</div>
    <div >KEY: 删除时 ，表 config 不会删除同名列，防止数据丢失。如果必要，请手动删列。</div>
    <div >KEY: 不支持修改</div>
    <div >自由模式: 勾选自由模式，将不限制值内容</div>
    <div >非自由模式: 值内容被限制在【值选项】中</div>
    <div >值选项: 非自由模式有效。必须是 json格式数组。如果允许为空需添加空值：["","user","order"]。空值经常使用，建议添加。</div>


</el-row>
{/block}

{block name="js"}


<script>
    function move(arr,index,tindex){
        //如果当前元素在拖动目标位置的下方，先将当前元素从数组拿出，数组长度-1，我们直接给数组拖动目标位置的地方新增一个和当前元素值一样的元素，
        //我们再把数组之前的那个拖动的元素删除掉，所以要len+1
        if(index>tindex){
            arr.splice(tindex,0,arr[index]);
            arr.splice(index+1,1)
        }
        else{
            //如果当前元素在拖动目标位置的上方，先将当前元素从数组拿出，数组长度-1，我们直接给数组拖动目标位置+1的地方新增一个和当前元素值一样的元素，
            //这时，数组len不变，我们再把数组之前的那个拖动的元素删除掉，下标还是index
            arr.splice(tindex+1,0,arr[index]);
            arr.splice(index,1)
        }
    }

    var dimensionData=null;
    new Vue({
        el: '#app',

        data:{
            is_edit:0,
            dimensionData: [],
        },
        methods: {
            onSubmit(){
                console.log(this.formd);
                var vm = this;
                if(!confirm("危险操作，确定修改？")){
                    return ;
                }
                var _dimensionData=vm.dimensionData;
                for (var i = 0; i < _dimensionData.length; i++) {
                    _dimensionData[i].if_free= ( _dimensionData[i].if_free_b?1:2 );
                }
                axios
                    .post('/index/api/savedimension',_dimensionData )
                    .then(function (response) {
                        location.reload();
                    });

            },
            onEdit(){
                var vm = this;
                vm.is_edit=1;
                var _d=dimensionData;
                _d.push({"key":"","title":"","is_new":"1"});
                vm.dimensionData = _d;
            },

            onUp(i){
                if(i==0)return;
                var vm = this;
                move(vm.dimensionData,i,i-1);
            },
            onDown(i){
                var vm = this;
                if(i== vm.dimensionData.length-1 )return;
                if(!(vm.dimensionData[i+1].key))return;
                move(vm.dimensionData,i,i+1);
            },
            onDel(i){
                var vm = this;
                console.log(vm.dimensionData[i] );
                vm.dimensionData.splice(i,1);
            },
            getDimensionTable(){

                var vm = this;
                axios
                    .get('/index/api/getdimension')
                    .then(function (response) {
                        console.log(response.data);
                        dimensionData=response.data;
                        for (var i = 0; i < dimensionData.length; i++) {
                            dimensionData[i].if_free_b= ( dimensionData[i].if_free==1 );
                        }
                        console.log(response.data);
                        vm.dimensionData = dimensionData;

                    });
            },
        },
        mounted: function () {
            this.getDimensionTable();
        },
    })
</script>

{/block}